import type { ReserveTableListItem } from '@/pages/Reservation/data';
import { ModalForm, ProFormMoney } from '@ant-design/pro-form';
import { message } from 'antd';
import { useState } from 'react';
import { request } from 'umi';

type WithdrawModalProps = {
  setUnVisible: () => void;
  visible?: boolean;
  onSuccessful: () => void;
  item?: ReserveTableListItem;
};

interface RefundApplyRecord {
  refundAmount: number;
}

export default (props: WithdrawModalProps) => {
  const { setUnVisible } = props;

  const [maxAmount] = useState<string>(props.item?.total_reserve_fee || '0.0');

  const onSubmitFinish = async (formData: RefundApplyRecord) => {
    const refundAmount = (formData.refundAmount || 0) * 100;

    const res = await request('/reservation/payment/refund', {
      method: 'POST',
      data: {
        refund_amount: refundAmount,
        reservation_id: props.item?.id.toString(),
      },
    });
    if (res.data) {
      props.onSuccessful();
      message.success({ content: '申请成功' });
      return true;
    }
    message.error({ content: '操作失败' });
    // setUnVisible();
    return false;
  };

  return (
    <ModalForm<RefundApplyRecord>
      title="退款申请"
      visible={props.visible}
      onFinish={onSubmitFinish}
      onVisibleChange={(visible) => {
        if (!visible) {
          setUnVisible();
        }
      }}
    >
      <p>本次可退金额 {maxAmount || '--'}</p>
      <ProFormMoney
        label="申请退款金额"
        name="refund-amount"
        width="sm"
        min={0.01}
        max={maxAmount || 0}
      />
    </ModalForm>
  );
};
